<template>
    <div class="bind-apply-container">
        <div class="header">
            <div class="title">系统绑定申请</div>
            <div class="desc">
                聚合账号内各系统为互相绑定关系，新的被推荐人进入聚合账号的一个系统再跳转进入其他品牌系统默认绑定到聚合账号内对应品牌账号下（扫码绑定除外，原有关系不变），同一品牌下有多账号在聚合账号内，以置顶系统为主系统。
            </div>
        </div>

        <div class="list">
            <ApplyCard :apply="item" v-for="(item, index) in applyList" :key="index" @confirm="showPassword" @refuse="showPassword"></ApplyCard>
        </div>

        <!--支付密码-->
        <PassPop ref="passpop" @finishPass="postApply" :showForget="false" title="请输入安全密码" text="输入该账户安全密码 绑定该账户" />

        <Confirm :title="alertMsg" :isAlert="true" ref="alert"></Confirm>
    </div>
</template>

<script>
import {commonMixin} from '@/common/mixin';
import ApplyCard from '@/views/User/apply-card';
import PassPop from '../../components/common/password-popup';
import api from '@/request/api';
import Confirm from '@/components/common/confirm';

export default {
    mixins: [commonMixin],
    name: 'bind-apply',
    data() {
        return {
            applyList: [],
            operateApply: '',
            status: '',
            alertMsg: ''
        };
    },
    props: {
        //聚合帐号id
        aid: {
            type: Number,
            default: 1,
            isRequired: true
        }
    },
    computed: {},
    created() {
        this._getApplyList();
    },
    mounted() {},
    methods: {
        //获取申请列表
        _getApplyList() {
            return this.request
                .get(api.polyApplyList, {})
                .then((res) => {
                    this.applyList = res.list;
                })
                .catch((err) => {
                    this.$toast.fail(err);
                });
        },
        showPassword(apply, isConfirm) {
            this.status = isConfirm ? 1 : 2;
            this.operateApply = apply;
            this.$refs.passpop.show();
        },
        //提交绑定请求结果
        postApply(password) {
            return this.request
                .post(api.setRequest, {request_id: this.operateApply.id, status: this.status, password: password})
                .then((res) => {
                    if (res) {
                        this.alertMsg = res.msg;
                        this.$refs.alert.show();
                        this._getApplyList();
                    }
                })
                .catch((err) => {
                    this.$toast.fail(err);
                });
        }
    },
    watch: {},
    components: {PassPop, ApplyCard, Confirm}
};
</script>

<style lang="stylus" scoped>
@import '~assets/main.styl'

*{
    box-sizing border-box
}

.bind-apply-container {
    position: relative
    width: 100vw
    .header{
        margin-bottom vw(14)
        .title{
            height vw(42)
            margin-bottom vw(1)
            word-vw(word14,gray3)
            line-height vw(19)
            flex-x(center,center)
            background-color grayF
        }
        .desc{
            word-vw(word12,gray9)
            line-height vw(16)
            padding smallMargin vw(31)
            flex-x(center,center)
            background-color grayF
        }
    }
}
</style>

